<template>
  <div class="card-container">
    <TableCard
      v-for="i in 20"
      :key="i"
      :isOccupied="i % 2 === 0"
      :tableNumber="i"
      :seatStatuses="[
        { isOccupied: i % 2 === 0, time: i % 2 === 0 ? '0小时20分' : '-' },
        { isOccupied: i % 2 !== 0, time: i % 2 !== 0 ? '0小时10分' : '-' }
      ]"
    />
  </div>
</template>

<script>
import TableCard from "./TableCard.vue";

export default {
  components: {
    TableCard,
  },
};
</script>

<style>
.card-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px; /* 设置卡片之间的间距 */
  justify-content: center; /* 居中对齐 */
  padding: 20px;
}
</style>
